<template>
	<view>
		<view class="app-content-view-title">
			<view class="title-content">
				<image :src="dataInfo.first.data.images[0].image_info.url" mode="widthFix"></image>
			</view>
		</view>
		<view class="app-content-view-box" style="background-color: rgb(219, 233, 236);">
			<view class="smart-item">
				<u-row>
					<u-col span="4" v-for="(item,index) in dataInfo.second" :key="index" @click='toShopDetail(item)'>
						<view class="col-box">
							<view class="item-img">
								<LazyLoad :src="item.value.goods.img800s" width='100%'></LazyLoad>
							</view>
							<view class="info-box">
								<text class="name text-ellipsis">{{item.value.goods.name}}</text>
								<text class="info text-ellipsis">{{item.value.goods.summary|summary}}</text>
								<text class="moneys">¥{{item.value.goods.price/100}}</text>
								<text class="del"
									v-if="item.value.goods.marketPrice!=item.value.goods.price">￥549</text>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>

	</view>
</template>

<script>
	import LazyLoad from '../LazyLoad/LazyLoad.vue'
	export default {
		name: "row-detail",
		components: {
			LazyLoad
		},
		props: {
			dataInfo: {
				type: Object,
				default: () => {}
			}
		},
		filters: {
			summary: function(params) {
				if (params.length > 0) {
					params = params.replace(/\n/g, "")
				}
				return params
			},
		},
		methods: {
			toShopDetail(item) {
				let itemId = item.value.goods.itemId
				if (itemId) {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${itemId}`
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.app-content-view-title {
		.title-content {
			padding: 0 .21rem;

			image {
				width: 100%;
			}
		}
	}

	.app-content-view-box {
		.smart-item {
			padding: 0 .21rem;
			background-color: rgb(219, 233, 236);

			/deep/.u-row {
				background-color: rgb(219, 233, 236);
				flex-wrap: wrap;
			}

			/deep/.u-col {
				margin-bottom: .14rem;
				padding-right: .115rem !important;

				.col-box {
					border-radius: .14rem;
					overflow: hidden;
				}

				&:nth-child(3n+3) {
					padding-right: 0 !important;
				}
			}

			.item-img {
				height: 1.8rem;
				background-color: #fff;

				image {
					height: 1.8rem;
				}
			}

			.info-box {
				line-height: 1.2;
				padding: 0.1rem 0.21rem;
				background: #fff;

				.name {
					display: inline-block;
					font-size: .24rem;
					text-align: center;
					font-weight: bolder;
					color: #3c3c3c;
					max-width: 100%;
				}

				.info {
					display: inline-block;
					color: #3c3c3c;
					font-size: .2rem;
					line-height: 1.6em;
					text-align: center;
					width: 100%;
				}

				.moneys {
					font-weight: 600;
					text-align: left;
					font-size: .28rem;
					font-family: Heiti SC, STHeiti;
					line-height: 1.2;
					color: rgb(245, 75, 75);
				}

				.del {
					text-decoration-line: line-through;
					opacity: 0.5;
					color: rgb(0, 0, 0);
					margin-left: .12rem;
					font-weight: 400;
					margin-top: .096rem;
					font-size: .2rem;
				}
			}
		}

	}
</style>